<template>
	<view class="content" v-if="pageShow">
		<!-- tab栏 -->
		<u-sticky>
			<view class="ffffff paddinglr">
				<u-tabs :list="tabList" @click="change" lineColor="rgba(243, 39, 28, 1)" :activeStyle="{
				    color: '#000000',
				    fontWeight: 800,
				    transform: 'scale(1.05)'}" :inactiveStyle="{
				    color: '#666666',
				    transform: 'scale(1)'
				}"></u-tabs>
			</view>
		</u-sticky>
		<view class="paddinglr padding_top" v-show="tabActive==0">
			<scroll-view class="scroll-view_H" scroll-x>
				<view class="flexleft">
					<view :class="item.isSelect?'select margin_right3':'noSelect margin_right3'"
						v-for="item in cateList" :key="item.id" @click="changeFor(item)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flexleft paddinglr padding_top" v-show="tabActive==1">
			<view :class="service_type==2?'select margin_right3':'noSelect margin_right3'" @click="changeService(2)">天学
			</view>
			<view :class="service_type==1?'select':'noSelect'" @click="changeService(1)">天聊</view>
		</view>
		<!-- 视频 -->
		<!-- <view class="fafafa padding" v-show="tabActive==0">
			<view class="ffffff margin_bottom3 border_2" v-for="item in list.data" :key="item.id"
				@click="goVideoInfo(item.id)">
				横向
				<view class="video" v-if="item.format==0">
					<image :src="item.image_text" mode="widthFix"></image>
				</view>
				竖向
				<view class="videoFormat" :style="{backgroundImage:`url(${item.image_text})`}"
					v-if="item.format==1"></view>
				<view class="margin_top paddinglr color_ling text_a padding_bottom border_bottom_solid">
					{{item.title}}
				</view>
				<view class="padding flexbetween">
					<view class="flexleft" @click.stop="edit(item,'/pages_index/addVideo?id=')">
						<image class="imgEdit margin_right1" src="/static/image/mine/edit.png" mode="widthFix"></image>
						<view class="color_ling text_a">
							编辑
						</view>
					</view>
					<view class="flexleft" @click.stop="grounding(item.id)">
						<image class="imgSelf margin_right1" src="/static/image/home/shelf_top.png" mode=""
							v-if="item.status=='normal'"></image>
						<image class="imgSelf margin_right1" src="/static/image/home/shelf.png" mode=""
							v-if="item.status=='hidden'"></image>
						<view class="color_ling text_a">
							{{item.status=="normal"?"上架":"下架"}}
						</view>
					</view>
					<view class="flexleft" @click.stop="remove(item.id)">
						<image class="imgDelete margin_right1" src="/static/image/mine/delete.png" mode="widthFix"></image>
						<view class="color_ling text_a">
							删除
						</view>
					</view>
					<view class="flexleft">
						<image class="imgComm margin_right1" src="/static/image/home/comment.png" mode="widthFix"></image>
						<view class="color_ling text_a">
							评论
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 展示 -->
		<view class="fafafa padding" v-show="tabActive==0">
			<view class="ffffff margin_bottom3 border_2 padding word_wrap" v-for="item in list.data" :key="item.id"
				@click="goForumInfo(item.id,1)">
				<view class="flexstart">
					<view style="margin-right: 20rpx;">
						<view class="image_ya">
							<image :src="item.user.avatar" mode="widthFix"></image>
						</view>
					</view>
					<view>
						<view class="text_g color_ling">{{item.user.nickname}}</view>
						<view class="year text_a  color_jiu">{{item.createtime_text}}</view>
					</view>
				</view>
				<view class="margin_top text_w color_ling">
					{{item.title}}
				</view>
				<view class="margin_top2 text_w color_ling" style="font-weight: 400;">
					{{item.description}}
				</view>
				<view class="margin_top1 flexleft flex_wrap">
					<view class="forumBox" v-for="(value,i) in item.images_arr" :key="i"
						@click.stop="lbtpriview(i,item.images_arr,2)">
						<image :src="value" mode="widthFix"></image>
					</view>
				</view>
				<view class="padding flexbetween">
					<view class="flexleft" @click.stop="edit(item,'/pages_index/addForum?id=')">
						<image class="imgEdit margin_right1" src="/static/image/mine/edit.png" mode="widthFix"></image>
						<view class="color_ling text_a">
							编辑
						</view>
					</view>
					<view class="flexleft" @click.stop="grounding(item.id)">
						<image class="imgSelf margin_right1" src="/static/image/home/shelf_top.png" mode=""
							v-if="item.status=='normal'"></image>
						<image class="imgSelf margin_right1" src="/static/image/home/shelf.png" mode=""
							v-if="item.status=='hidden'"></image>
						<view class="color_ling text_a">
							{{item.status=="normal"?"已上架":"已下架"}}
						</view>
					</view>
					<view class="flexleft" @click.stop="remove(item.id)">
						<image class="imgDelete margin_right1" src="/static/image/mine/delete.png" mode="widthFix"></image>
						<view class="color_ling text_a">
							删除
						</view>
					</view>
					<!-- <view class="flexleft">
						<image class="imgComm margin_right1" src="/static/image/home/comment.png" mode="widthFix"></image>
						<view class="color_ling text_a">
							评论
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 打赏抢答 -->
		<view class="fafafa padding" v-show="tabActive==1">
			<view class="ffffff margin_bottom3 border_2 padding word_wrap" v-for="item in list.data" :key="item.id"
				@click="goForumInfo(item.id,2)">
				<view class="flexstart">
					<view style="margin-right: 20rpx;">
						<view class="image_ya">
							<image :src="item.user.avatar" mode="widthFix"></image>
						</view>
					</view>
					<view>
						<view class="text_g color_ling">{{item.user.nickname}}</view>
						<view class="year text_a  color_jiu">{{item.createtime_text}}</view>
					</view>
				</view>
				<view class="margin_top2 reward">
					标金：{{item.price}}元
				</view>
				<view class="margin_top text_w color_ling">{{item.title}}</view>
				<view class="margin_top2 text_w color_ling" style="font-weight: 400;">{{item.description}}</view>
				<view class="margin_top1 flexleft flex_wrap">
					<view class="forumBox" v-for="(value,i) in item.images_arr" :key="i"
						@click.stop="lbtpriview(i,item.images_arr,2)">
						<image :src="value" mode="widthFix"></image>
					</view>
				</view>
				<view class="padding flexbetween">
					<view class="flexleft" @click.stop="edit(item,'/pages_index/addProblem?id=')">
						<image class="imgEdit margin_right1" src="/static/image/mine/edit.png" mode="widthFix"></image>
						<view class="color_ling text_a">
							编辑
						</view>
					</view>
					<view class="flexleft" @click.stop="grounding(item.id)">
						<image class="imgSelf margin_right1" src="/static/image/home/shelf_top.png" mode=""
							v-if="item.status=='normal'"></image>
						<image class="imgSelf margin_right1" src="/static/image/home/shelf.png" mode=""
							v-if="item.status=='hidden'"></image>
						<view class="color_ling text_a">
							{{item.status=="normal"?"已上架":"已下架"}}
						</view>
					</view>
					<view class="flexleft" @click.stop="remove(item.id)">
						<image class="imgDelete margin_right1" src="/static/image/mine/delete.png" mode="widthFix"></image>
						<view class="color_ling text_a">
							删除
						</view>
					</view>
					<view class="flexleft" @click.stop="goAnswer(item)">
						<image class="imgComm margin_right1" src="/static/image/home/comment.png" mode="widthFix"></image>
						<view class="color_ling text_a">
							回答
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flexcenter placeholderBoxTop" v-if="!list.data.length">
			<image class="placeholderBox" src="/static/placeholderimg.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				tabActive: 0,
				// tabList: [{
				// 	name: "视频"
				// }, {
				// 	name: "心情展示"
				// }, {
				// 	name: "打赏抢答"
				// }],
				tabList: [{
					name: "心情展示"
				}, {
					name: "打赏抢答"
				}],
				page: 1,
				list: {
					data: []
				},
				service_type: 2, //类别:1=天聊,2=天学
				pageShow: false,
				cateList: [], //展示分类
				community_category_id:"",//分类id
			}
		},
		onLoad() {
			this.getInfo()
		},
		onShow() {
			this.getCateList()
		},
		methods: {
			getInfo() {
				httpRequest.request("/api/index/index", "GET", {}).then(res => {
					this.dataAll = res.data
					// this.tabList[0].name = res.data.community_type1_alias //天学子标签
					this.tabList[0].name = res.data.community_type2_alias //天学子标签
					this.tabList[1].name = res.data.community_type3_alias //天学子标签
					this.pageShow = true
				})
			},
			getCateList() { //展示分类
				let _this = this
				httpRequest.request('/api/community/getcategory', 'GET', {}).then(res => {
					if (res.code == 1) {
						res.data.category2.forEach(item => {
							this.$set(item, "isSelect", false)
						})
						this.cateList = res.data.category2
						this.community_category_id=this.cateList[0].id
						this.cateList[0].isSelect=true
						this.init()
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/community/getmylist', 'GET', {
					page: page || 1,
					type: _this.tabActive + 2, // 类型:1=视频,2=论坛,3=打赏抢答
					service_type: _this.service_type, //类别:1=天聊,2=天学
					community_category_id:_this.community_category_id,//分类id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						// if (_this.tabActive == 0) {
						// 	res.data.data.forEach((item, index) => {
						// 		uni.getImageInfo({
						// 			src: item.image_text,
						// 			success(image) {
						// 				if (Number(image.width) > Number(image.height)) { //横向
						// 					_this.$set(item, "format", 0)
						// 				} else { //竖向
						// 					_this.$set(item, "format", 1)
						// 				}
						// 				console.log(image.width, index);
						// 				console.log(image.height, index);
						// 			}
						// 		});
						// 	})
						// }
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = res.data
							_this.list.data = resList.data;
						}
						_this.isGetInit = true
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			changeFor(item){ //展示切换分类
				this.cateList.forEach(value=>{
					value.isSelect=false
				})
				item.isSelect=true
				this.community_category_id=item.id
				this.init()
			},
			lbtpriview(index, value, type) {
				let i; //获取当前页面的轮播图数据
				if (type == 1) {
					i = [value]
				} else {
					i = value
				}
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					loop: true, //循环预览只在APP生效
				})
			},
			goVideoInfo(id) {
				uni.navigateTo({
					url: "/pages_index/videoInfo?id=" + id
				})
			},
			goForumInfo(id, type) { //展示、打赏抢答详情
				uni.navigateTo({
					url: "/pages_index/forumInfo?id=" + id + "&type=" + type
				})
			},
			edit(item, url) {
				if (item.status == "normal") {
					httpRequest.toast("已上架，不能编辑！")
					return false
				}
				uni.navigateTo({
					url: url + item.id
				})
			},
			grounding(id) { //上下架
				let _this = this;
				httpRequest.modal('提示', '请再次确认', true, (resp) => {
					if (resp) {
						httpRequest.request('/api/community/updown', 'POST', {
							id
						}, false, false, true).then(res => {
							if (res.code == 1) {
								httpRequest.toast(res.msg);
								_this.init()
							} else {
								httpRequest.toast(res.msg);
							}
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}
				})
			},
			remove(id) { //删除
				let _this = this;
				httpRequest.modal('提示', '请再次确认', true, (resp) => {
					if (resp) {
						httpRequest.request('/api/community/del', 'POST', {
							id
						}, false, false, true).then(res => {
							if (res.code == 1) {
								httpRequest.toast(res.msg);
								_this.init()
							} else {
								httpRequest.toast(res.msg);
							}
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}
				})
			},
			changeService(type) {
				this.service_type = type
				this.init()
			},
			change(e) { //tab栏切换
				this.tabActive = e.index
				console.log(e.index)
				this.init()
			},
			goAnswer(item) { //回答
				uni.navigateTo({
					url: "./answer?msg=" + encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.noSelect {
		padding: 10rpx 35rpx;
		background: #EFEFEF;
		border: 1rpx solid #EFEFEF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.select {
		padding: 10rpx 35rpx;
		background: rgba(243, 39, 28, 0.1);
		border: 1rpx solid #F3271C;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
	}

	::v-deep.u-tabs__wrapper__nav__item {
		flex: 1;
	}

	.video {
		height: 353rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}
	}

	.videoFormat {
		height: 653rpx;
		background-repeat: no-repeat;
		background-position: center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.imgBox {
		width: 100%;
		height: 353rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.border_bottom_solid {
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.03);
	}

	.imgEdit {
		width: 18.67rpx;
		height: 24.27rpx;
		display: block;
	}

	.imgSelf {
		width: 21rpx;
		height: 21.84rpx;
		display: block;
	}

	.imgDelete {
		width: 23.33rpx;
		height: 24.27rpx;
		display: block;
	}

	.imgComm {
		width: 28rpx;
		height: 28rpx;
		display: block;
	}

	.image_ya {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.forumBox {
		width: 33.3%;
		height: 194rpx;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;

		image {
			width: 193rpx;
			height: 100%;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
		}
	}

	.reward {
		min-width: 149rpx;
		display: inline-block;
		box-sizing: border-box;
		background: rgba(243, 39, 28, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 5rpx 15rpx;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
	}
</style>